<template>
  <div class="grid">
    <div class="col-12">
      <div class="card">
        <Toolbar class="mb-4">
          <template #start>
            <Button :label="$t('common.add')" icon="pi pi-plus" class="p-button-sm p-button-success m-2 " @click="dialogAdd()" v-if="checkAddAuth()" />
            <Button :label="$t('common.delete')" icon="pi pi-trash" class="p-button-sm p-button-danger m-2 "  @click="confirmDeleteSelected" :disabled="!store.selected || !store.selected.length" />
          </template>
        </Toolbar>
        <DataTable v-model:selection="store.selected" class="p-datatable-sm" ref="dt" :value="store.list" dataKey="id" :paginator="true" :rows="store.pageSize" :totalRecords="store.totalCount" :filters="store.filter" v-model:filters="store.filter" :first="store.pageSize*(store.pageNum-1)"
                   paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown" :rowsPerPageOptions="[20,50,100]"
                   :currentPageReportTemplate="$t('common.total') + ' ' + store.totalCount + ' ' + $t('common.row')" responsiveLayout="scroll"
                   lazy filterDisplay="menu" @sort="onEventQuery" @filter="onEventQuery" @page="onEventQuery" :sortField=store.sortField :sortOrder="store.sortOrder">
          <template #header>
            <div class="flex col-12 md:col-12">
              <!-- <div class="flex w-10"> -->
              <div >
                <InputText v-model="store.filter.somsProductId.value" placeholder="商品id" />
	<InputText v-model="store.filter.fieldId.value" placeholder="商品自定义字段表ID" />
	<InputText v-model="store.filter.fieldName.value" placeholder="字段名称" />
	<InputText v-model="store.filter.fieldType.value" placeholder="字段类型:0:字符串 1:数字" />
	<InputText v-model="store.filter.printFlag.value" placeholder="是否打印:0:不打印 1:打印" />
	<InputText v-model="store.filter.sort.value" placeholder="排序" />
	<InputText v-model="store.filter.value.value" placeholder="该字段填写的值" />
	
                <Button icon="pi pi-search" @click="handleQuery()" class="w-4rem"/>
                <Button icon="pi pi-refresh" class="ml-2 p-button-help p-button-text w-3rem" @click="clearFilters()"/>
              </div>
            </div>
          </template>
          <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
          <Column field="somsProductId" header="商品id" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.somsProductId}} 
   </template> 
 </Column>
	<Column field="fieldId" header="商品自定义字段表ID" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.fieldId}} 
   </template> 
 </Column>
	<Column field="fieldName" header="字段名称" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.fieldName}} 
   </template> 
 </Column>
	<Column field="fieldType" header="字段类型:0:字符串 1:数字" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.fieldType}} 
   </template> 
 </Column>
	<Column field="printFlag" header="是否打印:0:不打印 1:打印" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.printFlag}} 
   </template> 
 </Column>
	<Column field="sort" header="排序" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.sort}} 
   </template> 
 </Column>
	<Column field="value" header="该字段填写的值" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.value}} 
   </template> 
 </Column>
	
          <Column headerStyle="min-width:10rem;">
            <template #body="slotProps">
              <Button label="修改" class="p-button-rounded p-button-sm p-button-warning mr-2"  @click="dialogEdit(slotProps.data)" v-if="checkEditAuth()" />
              <Button label="删除" class="p-button-rounded p-button-sm p-button-danger mr-2" @click="dialogDelete(slotProps.data)" v-if="checkDeleteAuth()" />
            </template>
          </Column>
        </DataTable>

        <Dialog v-model:visible="dialog" :header="dialogTitle" :modal="true" class="p-fluid w-6">
          <div class="field mr-3">
  <label>商品id</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.somsProductId" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.somsProductId}"  />
      <small class="p-error" v-if="submitted && !store.form.somsProductId">商品id必填</small></div><div class="field mr-3">
  <label>商品自定义字段表ID</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.fieldId" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.fieldId}"  />
      <small class="p-error" v-if="submitted && !store.form.fieldId">商品自定义字段表ID必填</small></div><div class="field mr-3">
  <label>字段名称</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.fieldName" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.fieldName}"  />
      <small class="p-error" v-if="submitted && !store.form.fieldName">字段名称必填</small></div><div class="field mr-3">
  <label>字段类型:0:字符串 1:数字</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.fieldType" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.fieldType}"  />
      <small class="p-error" v-if="submitted && !store.form.fieldType">字段类型:0:字符串 1:数字必填</small></div><div class="field mr-3">
  <label>是否打印:0:不打印 1:打印</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.printFlag" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.printFlag}"  />
      <small class="p-error" v-if="submitted && !store.form.printFlag">是否打印:0:不打印 1:打印必填</small></div><div class="field mr-3">
  <label>排序</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.sort" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.sort}"  />
      <small class="p-error" v-if="submitted && !store.form.sort">排序必填</small></div><div class="field mr-3">
  <label>该字段填写的值</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.value" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.value}"  />
      <small class="p-error" v-if="submitted && !store.form.value">该字段填写的值必填</small></div>
          <template #footer>
            <Button :label="$t('common.cancel')" icon="pi pi-times" class="p-button-text" @click="handleCancel"/>
            <Button :label="$t('common.confirm')" icon="pi pi-check" class="p-button-text" @click="handleSave" />
          </template>
        </Dialog>

        <Dialog v-model:visible="deleteDialog" :style="{width: '300px'}" :header="$t('common.delete')" :modal="true">
          <div class="flex align-items-center justify-content-center">
            <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
            <span>{{ $t("common.confirmDelete") }}</span>
          </div>
          <template #footer>
            <Button :label="$t('common.cancel')" icon="pi pi-times" class="p-button-text" @click="deleteDialog = false"/>
            <Button :label="$t('common.confirm')" icon="pi pi-check" class="p-button-text" @click="handleDelete" />
          </template>
        </Dialog>

      </div>
    </div>
  </div>
</template>

<script setup>
import {onUnmounted, ref} from "vue";
import store from '../store/store/productCustomValue.js'
import {checkTabPath, getCurrentGlobalProperties, httpGet} from '@frontend/vue-common'
import {checkAuth} from "@frontend/vue-common";

const  matchPath = '/soms/product_custom_value'

const dialog = ref(false)
const submitted = ref(false)
const dialogTitle = ref("")
const deleteDialog = ref(false)
const checkDialog = ref(false)

function onEventQuery(event) {
  if (event.page ) {
    store.pageNum = event.page + 1
  } else {
    store.pageNum = 1
  }
  store.pageSize = event.rows
  store.sortField = event.sortField
  store.sortOrder = event.sortOrder
  handleQuery()
}

function confirmDeleteSelected() {
  deleteDialog.value = true
}

function handleQuery() {
  if(checkListAuth()){
    store.listProductCustomValue()
  }
}

function clearFilters(){
  store.cleanFilter()
  store.listProductCustomValue()
}

function dialogAdd() {
  dialog.value = true
  submitted.value = false
  dialogTitle.value = "新增"
  store.cleanForm()
}

function handleSave() {
  submitted.value = true
  if(dialogTitle.value === "新增"){
    if (validation()) {
      store.addProductCustomValue(store.form).then(()=> {
        dialog.value = false
        submitted.value = false
      })
    }
  }else {
    if (validation()) {
      store.editProductCustomValue().then(()=> {
        dialog.value = false
        submitted.value = false
      })
    }
  }

}

function handleCancel() {
  dialog.value = false
  store.cleanForm()
}


function dialogEdit(row){
  submitted.value = false
  dialogTitle.value = "编辑"
  store.cleanForm()
  store.form.id = row.id
  $vue_page_edit_form_field_loop_area$
  dialog.value = true
}

function dialogDelete(row){
  store.form.id = row.id
  deleteDialog.value = true
}

function handleDelete(){
  let selectedIds = []
  if (store.selected && store.selected.length > 0) {
    selectedIds.push(...store.selected.map(i=>{return i.id}))
  }
  selectedIds.push(store.form.id)
  store.deleteProductCustomValue(selectedIds).then(()=>{
    deleteDialog.value = false
  })
}

function validation() {
  // 自行替换
  /*if (store.form.???) {
    return true
  }*/
  return false
}

function checkListAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'query')
}

function checkAddAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'add')
}

function checkEditAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'edit')
}

function checkDeleteAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'delete')
}

handleQuery()

onUnmounted(() => {
  if (!checkTabPath(matchPath)) {
    store.cleanAll()
  }
})

</script>

<style lang="scss" scoped>
.required-icon{
  color: #D32F2F;
}
</style>